{% extends "admin/dashboard.html" %}
{% block content %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑新闻</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0D2E88',
                        accent: '#FF7D00',
                        dark: '#1D2939',
                        light: '#F9FAFB',
                        sidebar: '#0F172A',
                        sidebarActive: '#1E293B'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .sidebar-link {
                @apply flex items-center p-3 text-gray-300 hover:bg-sidebarActive hover:text-white rounded-lg transition-colors duration-200;
            }
            .sidebar-link.active {
                @apply bg-sidebarActive text-white;
            }
            .card {
                @apply bg-white rounded-xl shadow-sm p-6 mb-6;
            }
            .table-data {
                @apply px-6 py-4 whitespace-nowrap text-sm text-gray-500 border-b border-gray-200;
            }
            .table-header {
                @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200;
            }
        }
    </style>
</head>
<body class="font-sans text-dark bg-gray-50 p-6">
    <h1 class="text-2xl font-bold mb-6">{{ '编辑新闻' if news else '添加新闻' }}</h1>
    <div class="max-w-2xl bg-white rounded-xl shadow-sm p-6">
        <form id="news-edit-form">
            <input type="hidden" id="news-id" value="{{ news.id if news else '' }}">
            <div class="mb-4">
                <label for="title" class="block text-sm font-medium text-gray-700">标题:</label>
                <input type="text" id="title" name="title" value="{{ news.title if news else '' }}" required class="mt-1 p-2 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary">
            </div>
            <div class="mb-6">
                <label for="content" class="block text-sm font-medium text-gray-700">内容:</label>
                <textarea id="content" name="content" required class="mt-1 p-2 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary h-48">{{ news.content if news else '' }}</textarea>
            </div>
            <div class="flex space-x-3">
                <button type="button" onclick="submitEditForm()" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/80 cursor-pointer">{{ '保存修改' if news else '添加新闻' }}</button>
                <a href="{{ url_for('admin_news_list') }}" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-100">返回列表</a>
            </div>
        </form>
    </div>
    <script>
        function submitEditForm() {
            const newsId = document.getElementById('news-id').value;
            const title = document.getElementById('title').value;
            const content = document.getElementById('content').value;
            
            const formData = new FormData();
            formData.append('title', title);
            formData.append('content', content);
            
            const method = newsId ? 'PUT' : 'POST';
            const url = newsId ? `/api/news/${newsId}` : '/api/news';
            
            fetch(url, {
                method: method,
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.id) {
                    alert(newsId ? '新闻编辑成功' : '新闻添加成功');
                    window.location.href = '{{ url_for('admin_news_list') }}';
                } else {
                    alert(newsId ? '新闻编辑失败' : '新闻添加失败');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('请求出错，请重试');
            });
        }
    </script>
</body>
</html>
{% endblock %}